<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <title>显示隐藏</title>
    <style>
        .one{
            list-style: none;
            overflow: hidden;
        }
        .info{
            display: none;
            overflow: hidden;
            list-style: none;
            padding: 0;
            background: pink;
        }
        .info:nth-child(1) {
            display: block;
        }
        li{
            float: left;
            width: 150px;
        }
        a{
            text-decoration: none;
            color: aqua;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <ul class='one'>
        <li>
            <a href="">微博</a>
            <ul class='info'>
                <li>根据劳动法</li>
                <li>让你</li>
                <li>微博</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul class='info'>
                <li>美图</li>
                <li>我认同你 </li>
                <li> 独特</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul class='info'>
                <li>u；哦</li>
                <li>如果不</li>
                <li>如实填报</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul class='info'>
                <li>是 </li>
                <li> 个</li>
                <li>。有</li>
            </ul>
        </li>
    </ul>

    <script>
        $(function(){
            // var as=document.getElementsByTagName('a');
            // var uls=document.getElementsByClassName('info');
            // $('a');
            // $('.info');
            
            $('a').each(function(){ 
                // $(this).mouseover(function(){
                //     // $(this).siblings('ul').show();
                //     $(this).siblings('ul').slideDown(1000);
                // });
                // $(this).mouseout(function(){
                //     $(this).siblings('ul').hide();
                // });

                // $(this).hover(方法一表示鼠标经过时触发的函数function(){},方法二表示鼠标离开时触发的函数function(){});
                // $(this).hover(function(){
                $(this).hover(function(){
                    $(this).siblings('ul').stop().css('display','block');
                    $(this).parent().siblings().children('ul').stop().css('display','none');

                    // 下滑动画
                    // $(this).siblings('ul').stop().slideDown(500);
                // },function(){
                //   // 鼠标离开时触发函数
                //     $(this).siblings('ul').stop().hide();
                // });
            });        

            // $('li a').hover(function(){
            //     // slideToggle()表示上滑下滑的动画切换效果
            //     // stop函数必须写道动画的前面 表示结束上一次动画，执行本次动画
            //     $(this).siblings().stop().slideToggle();    
            // });
        })

            
})
        
    </script>
</body>
</html>